<template>
  <div class="phone-con">
    <form>
      <div class="phone">
        <!-- class="input-error" -->
        <input type="text" placeholder="请输入手机号" v-model.trim="phoneNum" @blur="isOk" @input="havaUser=true" :class="{'input-error':isSucceed == false||havaUser===false}">
        <p class="isSucceed" v-show="isSucceed===false">请输入正确的手机号</p>
        <p class="isSucceed" v-show="havaUser===false">用户名不存在</p>
      </div>
      <div class="code">
        <input type="text" placeholder="请输入验证码" v-model.trim="code" @blur="isOkCode" @input="codeOk=true" :class="{'input-error':isCodeSucceed == false||codeOk===false}">
        <p class="isSucceed" v-show="isCodeSucceed===false">请输入6位数的验证码</p>
        <p class="isSucceed" v-show="codeOk===false">验证码错误</p>
        <div class="set">
          <button v-if="isSet" @click="setCode" :disabled="isSucceed===null||isSucceed===false" :class="{'color-error':isSucceed===null||isSucceed===false}">发送验证码</button>
          <van-count-down :time="time" format="ss秒" v-else @finish="finish" />
        </div>
      </div>
    </form>
    <!-- 登入按钮 -->
    <button class="login" :disabled="!(isSucceed===true&&code!=='')" @click="login" :class="{'error-button':!(isSucceed===true&&code!=='')}">
      登入
    </button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Phone',
  data() {
    return {
      phoneNum: '',
      code: '',
      // 收集手机号码表单验证后的结果
      isSucceed: null,
      // 收集验证码表单验证的结果
      isCodeSucceed: null,
      // 控制倒计时的时间
      time: 10000,
      // 控制显示倒计时还是发送验证码
      isSet: true,
      // 判断用户名是否存在
      havaUser: null,
      // 判断验证码是否正确
      codeOk: null
    }
  },
  methods: {
    isOk(e) {
      const value = e.target.value
      this.validate(value, 1)
    },
    isOkCode(e) {
      const value = e.target.value
      this.validate(value, 2)
    },
    // 表单验证   val 是判断要验证的值 num 是要判断的类型
    validate(val, num) {
      let zzbds
      if (num === 1) {
        zzbds = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        this.isSucceed = zzbds.test(val)
      } else {
        zzbds = /^\d{6}$/
        this.isCodeSucceed = zzbds.test(val)
      }
    },
    async setCode() {
      this.isSet = false
      const res = await this.$store.dispatch('getCode')
      this.code = res
      this.isCodeSucceed = true
      this.codeOk = true
    },
    // 登入
    async login() {
      if (this.isCodeSucceed) {
        const { phoneNum, code } = this
        const data = {
          phoneNum,
          code
        }
        const res = await this.$store.dispatch('phoneLogin', data)
        if (res) {
          this.$router.push('/')
        }
        this.havaUser = this.hasUser
        this.codeOk = this.flag
      }
    },
    // 倒计时结束
    finish() {
      this.time = 10000
      this.isSet = true
    }
  },
  computed: {
    ...mapState(['hasUser', 'flag'])
  }
}
</script>

<style lang='less' scoped>
.phone-con {
  font-size: 28px;
  form {
    width: 460px;
    margin: 0 auto;
    div {
      position: relative;
      .isSucceed {
        position: absolute;
        bottom: 0;
        padding-left: 20px;
        color: red;
      }
    }
    input {
      width: 100%;
      height: 80px;
      background-color: #f0f0f0;
      margin-bottom: 35px;
      border-radius: 25px;
      border: 1px solid #f0f0f0;
      padding-left: 25px;
    }
    .input-error {
      border: 1px solid red;
    }
    .code {
      .set {
        position: absolute;
        right: 25px;
        top: 15%;
        width: 150px;
        border: 0;
        color: #1789fe;
        font-weight: 700;
        button {
          border: 0;
        }
      }
      .van-count-down {
        color: #1789fe;
        font-size: 28px;
        margin-top: 12px;
      }
      .color-error {
        color: #b7b7b7;
      }
    }
  }
  .login {
    display: block;
    width: 460px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    background-color: #1789fe;
    margin: 0 auto;
    border-radius: 35px;
    outline: none;
    border: 0;
  }
  .error-button {
    background-color: #b5daff;
  }
}
</style>
